<style lang="scss" scoped>
.main-container {
  padding-top: 30px;
  background-color: #ffffff;
}
.pagination-block {
  margin: 0 auto;
  margin-bottom: 10px;
}
</style>

<template>
  <!-- 导航栏组件 -->
  <el-affix :offset="60">
    <navbar :list="navbar_list"></navbar>
  </el-affix>

  <!-- 卡片组件 -->
  <div class="main-container">
    <el-row :gutter="0" justify="center" v-for="item in card_num">
      <el-col :span="22">
        <card :index="item - 1"></card>
      </el-col>
    </el-row>

    <!-- 分页器组件 -->
    <div class="pagination-block">
      <el-row :gutter="0" justify="center">
        <el-col :span="8">
          <el-pagination layout="prev, pager, next" :total="100" background="true" :pager-count="6"/>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup>
import request from '../../utils/axios';
import { onMounted, ref } from 'vue';
import card from './photoer-card/index.vue';
import navbar from '../index/navbar/index.vue';

let card_num = ref(1);
onMounted(async () => {
  await request({
    url: 'http://website.bluej.cn/api/carouselGroup/get',
    method: 'GET',
    params: {
      carouselGroupId: 1390,
    },
  }).then((res) => {
    card_num.value = Math.floor(res.data.Carousels.length / 3);
  });
});

const navbar_list = ['推荐摄影师', '热门摄影师', '新晋摄影师', '签约摄影师'];
</script>
